<script setup>
  import { reactive, ref } from 'vue'
  const current = ref(1)
  const steps = [
    {
      title: '已完成',
      content: '这里是提示文字',
      time: '2024-12-9 14:47:01',
      dealBy: '实时的',
      value: 0,
      status: 1
    },
    {
      title: '进行中',
      content: '这里是提示文字',
      time: '2024-12-9 14:47:01',
      dealBy: '实时的',
      value: 1,
      status: 2
    },
    {
      title: '未进行',
      content: '这里是提示文字',
      time: '2024-12-9 14:47:01',
      dealBy: '实时的',
      value: 2,
      status: 0
    },
    {
      title: '未进行',
      content: '这里是提示文字',
      time: '2024-12-9 14:47:01',
      dealBy: '实时的',
      value: 3,
      status: 0
    }
  ]

  const treeData = ref([
    {
      label: '第一段',
      id: 1,
      children: [
        {
          label: '第一段-1',
          text: '1231',
          id: 2,
          edit: false
        },
        {
          label: '第一段-2',
          id: 3,
          edit: false
        }
      ]
    },
    {
      label: '第二段',
      id: 4,
      edit: false,
      children: [
        {
          label: '第二段-1',
          id: 5,
          edit: false
        },
        {
          label: '第二段-2',
          id: 6,
          edit: false
        }
      ]
    }
  ])

  const tree = ref(null)

  const files = ref([])
  // http://192.168.8.151/minio/byt-device-plus/5c41f871499f4b5eb8f467ad4ea96bf3.jpg

  const beforeUpload = ({ raw }) => {
    console.log(raw)
    files.value.push({
      name: '',
      url: 'http://192.168.8.151/minio/byt-device-plus/5c41f871499f4b5eb8f467ad4ea96bf3.jpg'
    })
  }
  const onRemove = data => {
    console.log(data)
  }

  const handleAllowDrop = ctx => {
    const { dragNode, dropNode, dropPosition } = ctx
    const dragNodeLevel = dragNode['__tdesign_tree-node__'].level
    const dropNodeLevel = dropNode['__tdesign_tree-node__'].level
    if (
      (dragNodeLevel == dropNodeLevel && dropPosition == 0) ||
      (dragNodeLevel != dropNodeLevel && dropPosition == 1) ||
      dropPosition == -1
    ) {
      return false
    }
    console.log('拖拽成功')
  }

  const clickNode = ctx => {
    console.log(ctx.node)
  }

  const add = node => {
    console.log(node)
    tree.value.appendTo(
      node.value,
      reactive({
        label: '第一段-1',
        text: '1231',
        nodeValue: '',
        edit: true
      })
    )

    tree.value.refresh()
  }
  const del = node => {
    node.remove()
  }
</script>

<template>
  <div class="container">
    <t-steps :current="current" readonly>
      <t-step-item v-for="item in steps" :key="item.value" :title="item.title">
        <template #content>
          <div>{{ item.dealBy }}</div>
          <div>{{ item.time }}</div>
        </template>
      </t-step-item>
    </t-steps>
    <t-upload
      v-model="files"
      action=""
      theme="image"
      tips="允许选择多张图片文件上传，最多只能上传 3 张图片"
      accept="image/*"
      auto-upload
      multiple
      :max="3"
      :before-upload="beforeUpload"
      :on-remove="onRemove"
    ></t-upload>

    <div class="treeArea">
      <t-tree
        ref="tree"
        :data="treeData"
        activable
        hover
        transition
        draggable
        expand-all
        :allow-drop="handleAllowDrop"
        @click="clickNode"
      >
        <template #label="{ node }">
          <t-input v-if="node.data.edit" v-model="node.data.nodeValue" />
          <span v-else>{{ node.label }}</span>
        </template>

        <template #operations="{ node }">
          <t-space :size="6" class="tdesign-demo-block-row">
            <t-button
              v-if="node.getLevel() == 0"
              size="small"
              variant="base"
              @click.stop="add(node)"
            >新增子节点</t-button>
            <t-button
              size="small"
              variant="base"
              theme="danger"
              @click.stop="del(node)"
            >删除</t-button>
          </t-space>
        </template>
      </t-tree>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .treeArea {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
</style>
